<template>
  <div class="finance-page bg-white dark:bg-gray-900 min-h-screen">
    <!-- 页面标题 -->
    <div class="page-header p-6 border-b dark:border-gray-700">
      <div class="flex justify-between items-center">
        <div class="header-left">
          <h2 class="text-2xl font-bold dark:text-white">财务管理</h2>
        </div>
        <div class="header-right">
          <a-space>
            <a-button type="primary" @click="handleWithdraw">
              <template #icon><icon-export /></template>
              申请提现
            </a-button>
            <a-button
              @click="handleExport"
              class="dark:text-gray-300 dark:border-gray-600"
            >
              <template #icon><icon-download /></template>
              导出对账单
            </a-button>
          </a-space>
        </div>
      </div>
    </div>

    <!-- 账户概览 -->
    <div class="overview-section p-6">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card class="overview-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">
                <span>账户余额</span>
                <a-tooltip content="可提现金额">
                  <icon-question-circle class="dark:text-gray-400" />
                </a-tooltip>
              </div>
              <div class="card-amount dark:text-white">
                ¥{{ accountInfo.balance }}
              </div>
              <div class="card-actions">
                <a-button
                  type="text"
                  @click="handleWithdraw"
                  class="dark:text-blue-400"
                >
                  提现
                  <template #icon><icon-right /></template>
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card class="overview-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">
                <span>待结算</span>
                <a-tooltip content="订单完成后的待结算金额">
                  <icon-question-circle class="dark:text-gray-400" />
                </a-tooltip>
              </div>
              <div class="card-amount dark:text-white">
                ¥{{ accountInfo.pending }}
              </div>
              <div class="card-actions">
                <a-button
                  type="text"
                  @click="handleViewPending"
                  class="dark:text-blue-400"
                >
                  查看明细
                  <template #icon><icon-right /></template>
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card class="overview-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">
                <span>本月收入</span>
                <a-tooltip content="本月累计收入">
                  <icon-question-circle class="dark:text-gray-400" />
                </a-tooltip>
              </div>
              <div class="card-amount dark:text-white">
                ¥{{ accountInfo.monthlyIncome }}
              </div>
              <div class="card-compare dark:text-gray-400">
                <span
                  :class="[
                    accountInfo.monthlyGrowth >= 0 ? 'trend-up' : 'trend-down',
                    'dark:text-green-400',
                  ]"
                >
                  <template v-if="accountInfo.monthlyGrowth >= 0">
                    <icon-arrow-rise /> +{{ accountInfo.monthlyGrowth }}%
                  </template>
                  <template v-else>
                    <icon-arrow-fall /> {{ accountInfo.monthlyGrowth }}%
                  </template>
                </span>
                较上月
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 收支明细 -->
    <div class="detail-section px-6 pb-6">
      <a-card class="detail-card dark:bg-gray-800" :bordered="false">
        <template #title>
          <div class="card-title-wrapper">
            <span class="dark:text-white">收支明细</span>
            <a-radio-group v-model="detailType" type="button">
              <a-radio value="all">全部</a-radio>
              <a-radio value="income">收入</a-radio>
              <a-radio value="expense">支出</a-radio>
            </a-radio-group>
          </div>
        </template>

        <!-- 搜索表单 -->
        <a-form :model="searchForm" layout="inline" class="search-form">
          <a-form-item
            field="dateRange"
            label="时间范围"
            class="dark:text-gray-300"
          >
            <a-range-picker
              v-model="searchForm.dateRange"
              style="width: 260px"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item field="type" label="交易类型" class="dark:text-gray-300">
            <a-select
              v-model="searchForm.type"
              placeholder="请选择交易类型"
              allow-clear
              style="width: 200px"
              class="dark:bg-gray-700 dark:text-gray-300"
            >
              <a-option value="room">房费收入</a-option>
              <a-option value="deposit">押金</a-option>
              <a-option value="refund">退款</a-option>
              <a-option value="withdraw">提现</a-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button
                @click="handleReset"
                class="dark:text-gray-300 dark:border-gray-600"
              >
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>

        <!-- 明细表格 -->
        <a-table
          :data="detailList"
          :columns="columns"
          :pagination="pagination"
          class="dark:bg-gray-800"
          @page-change="onPageChange"
          @page-size-change="onPageSizeChange"
          @sorter-change="handleSorterChange"
        >
          <!-- 交易信息 -->
          <template #info="{ record }">
            <div class="transaction-info">
              <div class="transaction-type dark:text-white">
                {{ record.typeText }}
              </div>
              <div class="transaction-time dark:text-gray-400">
                {{ record.createTime }}
              </div>
            </div>
          </template>

          <!-- 关联订单 -->
          <template #order="{ record }">
            <div v-if="record.order" class="order-info">
              <div class="order-no dark:text-white">
                {{ record.order.orderNo }}
              </div>
              <div class="order-amount dark:text-gray-400">
                ¥{{ record.order.amount }}
              </div>
            </div>
            <span v-else class="dark:text-gray-400">-</span>
          </template>

          <!-- 收支金额 -->
          <template #amount="{ record }">
            <span
              class="amount"
              :class="[
                record.type === 'income'
                  ? 'income dark:text-green-400'
                  : 'expense dark:text-red-400',
              ]"
            >
              {{ record.type === "income" ? "+" : "-" }}¥{{ record.amount }}
            </span>
          </template>

          <!-- 状态 -->
          <template #status="{ record }">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.statusText }}
            </a-tag>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 提现弹窗 -->
    <a-modal
      v-model:visible="withdrawVisible"
      title="申请提现"
      @cancel="cancelWithdraw"
      @before-ok="handleWithdrawSubmit"
      class="dark:bg-gray-800"
    >
      <a-form
        ref="withdrawFormRef"
        :model="withdrawForm"
        :rules="withdrawRules"
        layout="vertical"
      >
        <a-form-item
          field="amount"
          label="提现金额"
          required
          class="dark:text-gray-300"
        >
          <a-input-number
            v-model="withdrawForm.amount"
            placeholder="请输入提现金额"
            :min="100"
            :max="accountInfo.balance"
            :step="100"
            style="width: 100%"
            class="dark:bg-gray-700 dark:text-gray-300"
          />
          <div class="form-item-tip dark:text-gray-400">
            可提现金额：¥{{ accountInfo.balance }}
          </div>
        </a-form-item>
        <a-form-item
          field="account"
          label="提现账户"
          required
          class="dark:text-gray-300"
        >
          <a-select
            v-model="withdrawForm.account"
            placeholder="请选择提现账户"
            class="dark:bg-gray-700 dark:text-gray-300"
          >
            <a-option
              v-for="account in withdrawAccounts"
              :key="account.id"
              :value="account.id"
            >
              {{ account.name }} - {{ account.account }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="verifyCode"
          label="验证码"
          required
          class="dark:text-gray-300"
        >
          <div class="verify-code-input">
            <a-input
              v-model="withdrawForm.verifyCode"
              placeholder="请输入验证码"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
            <a-button
              :disabled="!!codeTimer"
              @click="sendVerifyCode"
              class="dark:text-gray-300 dark:border-gray-600"
            >
              {{ codeTimer ? `${codeTimer}s后重新获取` : "获取验证码" }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>
      <div class="withdraw-tips dark:text-gray-400">
        <p>温馨提示：</p>
        <p>1. 单笔提现最低金额为100元</p>
        <p>2. 提现申请将在1-3个工作日内处理</p>
        <p>3. 请确保提现账户信息准确无误</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconExport,
  IconDownload,
  IconSearch,
  IconRefresh,
  IconRight,
  IconQuestionCircle,
  IconArrowRise,
  IconArrowFall,
} from "@arco-design/web-vue/es/icon";

// 账户信息
const accountInfo = reactive({
  balance: 12345.67,
  pending: 5678.9,
  monthlyIncome: 23456.78,
  monthlyGrowth: 12.5,
});

// 明细类型
const detailType = ref("all");

// 搜索表单
const searchForm = reactive({
  dateRange: [],
  type: null,
});

// 表格列配置
const columns = [
  {
    title: "交易信息",
    slotName: "info",
    width: 200,
  },
  {
    title: "关联订单",
    slotName: "order",
    width: 200,
  },
  {
    title: "收支金额",
    slotName: "amount",
    width: 150,
    sortable: { sortDirections: ["ascend", "descend"] },
  },
  {
    title: "状态",
    slotName: "status",
    width: 120,
  },
];

// 明细列表数据
const detailList = ref([
  {
    id: 1,
    type: "income",
    typeText: "房费收入",
    createTime: "2024-03-18 12:34:56",
    order: {
      orderNo: "H202403180001",
      amount: "688.00",
    },
    amount: "688.00",
    status: "success",
    statusText: "已完成",
  },
  {
    id: 2,
    type: "expense",
    typeText: "退款支出",
    createTime: "2024-03-17 15:30:00",
    order: {
      orderNo: "H202403170002",
      amount: "299.00",
    },
    amount: "299.00",
    status: "success",
    statusText: "已完成",
  },
  {
    id: 3,
    type: "income",
    typeText: "押金收入",
    createTime: "2024-03-16 09:15:00",
    order: {
      orderNo: "H202403160003",
      amount: "500.00",
    },
    amount: "500.00",
    status: "pending",
    statusText: "待结算",
  },
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 提现相关
const withdrawVisible = ref(false);
const withdrawFormRef = ref(null);
const withdrawForm = reactive({
  amount: null,
  account: null,
  verifyCode: "",
});
const withdrawRules = {
  amount: [
    { required: true, message: "请输入提现金额" },
    { type: "number", min: 100, message: "提现金额不能小于100元" },
    {
      validator: (value) => value <= accountInfo.balance,
      message: "提现金额不能大于可提现余额",
    },
  ],
  account: [{ required: true, message: "请选择提现账户" }],
  verifyCode: [
    { required: true, message: "请输入验证码" },
    { length: 6, message: "验证码长度必须为6位" },
  ],
};
const codeTimer = ref(0);

// 提现账户列表
const withdrawAccounts = [
  {
    id: 1,
    name: "工商银行",
    account: "6222************1234",
  },
  {
    id: 2,
    name: "支付宝",
    account: "137****8888",
  },
];

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    success: "green",
    pending: "orange",
    failed: "red",
  };
  return colorMap[status] || "default";
};

// 搜索
const handleSearch = () => {
  // 实现搜索逻辑
};

// 重置搜索
const handleReset = () => {
  searchForm.dateRange = [];
  searchForm.type = null;
  handleSearch();
};

// 分页相关方法
const onPageChange = (current) => {
  pagination.current = current;
  handleSearch();
};

const onPageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
  handleSearch();
};

// 排序处理
const handleSorterChange = (sorter) => {
  handleSearch();
};

// 查看待结算明细
const handleViewPending = () => {
  detailType.value = "all";
  searchForm.type = "pending";
  handleSearch();
};

// 导出对账单
const handleExport = () => {
  Message.success("对账单导出中...");
};

// 申请提现
const handleWithdraw = () => {
  withdrawForm.amount = null;
  withdrawForm.account = null;
  withdrawForm.verifyCode = "";
  withdrawVisible.value = true;
};

// 取消提现
const cancelWithdraw = () => {
  withdrawVisible.value = false;
};

// 发送验证码
const sendVerifyCode = async () => {
  try {
    // 调用发送验证码API
    Message.success("验证码已发送");
    codeTimer.value = 60;
    const timer = setInterval(() => {
      codeTimer.value--;
      if (codeTimer.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    Message.error("验证码发送失败");
  }
};

// 提交提现
const handleWithdrawSubmit = async () => {
  try {
    await withdrawFormRef.value.validate();
    // 调用提现API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("提现申请已提交");
    withdrawVisible.value = false;
    return true;
  } catch (error) {
    return false;
  }
};
</script>

<style lang="less" scoped>
.finance-page {
  :deep(.arco-table-th) {
    background-color: var(--color-bg-2);
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-table-td) {
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-select-view),
  :deep(.arco-picker) {
    .dark & {
      background-color: #374151;
      border-color: #4b5563;

      &:hover,
      &:focus {
        border-color: #60a5fa;
      }
    }
  }

  :deep(.arco-modal) {
    .dark & {
      background-color: #1f2937;
      .arco-modal-header {
        background-color: #1f2937;
        color: #e5e7eb;
        border-bottom: 1px solid #374151;
      }
      .arco-modal-content {
        background-color: #1f2937;
        color: #e5e7eb;
      }
    }
  }

  .overview-section {
    .overview-card {
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      height: 140px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.05)
        );
        z-index: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

        &::before {
          opacity: 1;
        }
      }

      .card-content {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 20px;
      }

      .card-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-2);
        margin-bottom: 12px;
        font-size: 15px;
        font-weight: 500;

        .arco-icon {
          font-size: 16px;
          opacity: 0.8;
        }
      }

      .card-amount {
        font-size: 28px;
        font-weight: 600;
        color: var(--color-text-1);
        margin-bottom: 12px;
        background: linear-gradient(45deg, #2196f3, #00bcd4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .card-compare {
        font-size: 13px;
        color: var(--color-text-3);
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: auto;

        .trend-up {
          color: #10b981;
          display: flex;
          align-items: center;
          gap: 2px;

          .arco-icon {
            font-size: 14px;
          }
        }

        .trend-down {
          color: #ef4444;
          display: flex;
          align-items: center;
          gap: 2px;

          .arco-icon {
            font-size: 14px;
          }
        }
      }

      .card-actions {
        margin-top: auto;

        .arco-btn {
          padding: 6px 12px;
          font-size: 13px;
          font-weight: 500;

          &:hover {
            transform: translateX(4px);
          }
        }
      }
    }
  }

  .detail-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    .dark & {
      background: rgba(31, 41, 55, 0.6);
    }

    .card-title-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--color-neutral-3);

      .dark & {
        border-color: #374151;
      }
    }

    .search-form {
      margin: 24px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 8px;

      .dark & {
        background: rgba(31, 41, 55, 0.5);
      }
    }

    .transaction-info {
      .transaction-type {
        font-weight: 500;
        margin-bottom: 6px;
        color: var(--color-text-1);
      }

      .transaction-time {
        font-size: 13px;
        color: var(--color-text-3);
      }
    }

    .order-info {
      .order-no {
        font-weight: 500;
        margin-bottom: 6px;
        color: var(--color-text-1);
      }

      .order-amount {
        font-size: 13px;
        color: var(--color-text-3);
      }
    }

    .amount {
      font-weight: 600;
      font-size: 15px;

      &.income {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
        padding: 4px 8px;
        border-radius: 4px;
      }

      &.expense {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
        padding: 4px 8px;
        border-radius: 4px;
      }
    }
  }

  .verify-code-input {
    display: flex;
    gap: 12px;

    .arco-input-wrapper {
      flex: 1;
    }

    .arco-btn {
      min-width: 120px;
    }
  }

  .withdraw-tips {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-3);

    p {
      margin: 6px 0;
      display: flex;
      align-items: center;
      gap: 6px;

      &::before {
        content: "•";
        color: var(--color-primary-light-4);
      }
    }
  }
}
</style>
